<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<html>
<head>
    <title>Frontend Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5;
        }

        .header {
            background-color: #343a40; /* 深灰色背景 */
            color: white;
            padding: 20px;
            text-align: center;
        }

        .header h1 {
            margin: 0;
        }

        .navbar {
            display: flex;
            justify-content: center;
            background-color: #343a40; /* 深灰色背景 */
            padding: 10px 0;
        }

        .navbar a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            margin: 0 5px;
        }

        .navbar a:hover {
            background-color: #495057;
            border-radius: 4px;
        }

        .main {
            padding: 0;
            background-color: #ffffff;
            flex: 1;
        }

        .footer {
            background-color: #343a40; /* 深灰色背景 */
            color: white;
            text-align: center;
            padding: 10px 0;
            width: 100%;
        }

        .content-container {
            padding: 0;
            margin: 0;
            height: calc(100vh - 100px); /* Adjust based on header and footer height */
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>

<div class="container-fluid d-flex flex-column min-vh-100 p-0">
    <!-- 头部 -->
    <header class="header">
        <nav class="navbar">
            <c:forEach var="menu" items="${frontmenuItems}">
                <a href="#" onclick="loadContent('${menu.page}')">${menu.name}</a>
            </c:forEach>
        </nav>
    </header>

    <!-- 主内容区 -->
    <main class="main flex-grow-1">
        <div class="row no-gutters content-container">
            <iframe id="content-frame" src="front-index.jsp"></iframe>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer mt-auto">
        <p>&copy; 2024 Your Company. All rights reserved.</p>
    </footer>
</div>

<script>
    function loadContent(page) {
        var iframe = document.getElementById('content-frame');
        iframe.src = page;
    }
</script>

</body>
</html>
